import {View, Text, Image} from "@tarojs/components";
import styles from "./Me.module.scss"
import {useEffect, useState} from "react";
import Taro, {usePullDownRefresh} from "@tarojs/taro";
import globalData from "../../global_data";
import {useEventBusSubscribeDelay} from "../../envent_bus/event_bus";
import {LoginBackMe} from "../../envent_bus/events";
import {request} from "../../utils/request";
import {apis} from "../../constants/apis";

const Me = () => {
  const [userInfo, setUserInfo] = useState<any>({});
  const [isGotUserInfo, setIsGotUserInfo] = useState(false);
  const setLoginBackListener = useEventBusSubscribeDelay<LoginBackMe>(LoginBackMe.eventName);
  useEffect(() => {
    getUserInfo();
  }, []);

  usePullDownRefresh(() => {
    if (globalData.accessToken !== "" && globalData.userInfo) {
      getPullUserInfo();
    } else {
      Taro.showToast({title: "请先登录", icon: "error"})
    }
    setTimeout(() => {
      Taro.stopPullDownRefresh();
    }, 1000);
  });

  const getPullUserInfo = () => {
    request({
      url: apis.CHECK_USER_INFO,
      data: {
        phone: globalData.userInfo.phone,
      },
      pureData: false,
    }).then(res => {
      globalData.userInfo = res.data;
      setUserInfo(res.data);
    })
  }

  const onMeRegisterBtnClick = () => {
    Taro.navigateTo({
      url: '../login/login'
    });
    setLoginBackListener(() => {
      getUserInfo();
    })
  }

  const getUserInfo = () => {
    if (globalData.accessToken !== "" && globalData.userInfo) {
      getPullUserInfo();
      setIsGotUserInfo(true);
      setUserInfo(globalData.userInfo);
    }
  }

  const toMyOrders = () => {
    if (JSON.stringify(globalData.userInfo) == "{}") {
      Taro.showToast({
        icon: 'none',
        title: "请先登录/注册"
      });
      return;
    }
    Taro.navigateTo({
      url: "../my_orders/my_orders",
    })
  };

  const toRefundOrders = () => {
    if (JSON.stringify(globalData.userInfo) == "{}") {
      Taro.showToast({
        icon: 'none',
        title: "请先登录/注册"
      });
      return;
    }
    Taro.navigateTo({
      url: "../refund_orders_page/refund_orders_page",
    })
  }

  const toSelectAddress = () => {
    if (JSON.stringify(globalData.userInfo) == "{}") {
      Taro.showToast({
        icon: 'none',
        title: "请先登录/注册"
      });
      return;
    }
    Taro.navigateTo({
      url: "../select_address/select_address",
    })
  }


  return (
    <View className="container">
      <View>
        <View className={styles.page_bg_header}/>
        <View className={styles.page_title}>
          <Text style={{fontSize: '50rpx', fontWeight: 'bold'}}>我的</Text>
        </View>
      </View>

      <View className={styles.user_info}>
        {isGotUserInfo ? (userInfo.name !== undefined ?
          <View className={styles.user_name}>{userInfo.name}</View> :
          <View className={styles.user_name}>无名</View>) :
          <Text onClick={onMeRegisterBtnClick} className={styles.btn_me_register}>登录/注册</Text>
        }
        <View style={{display: 'flex', flexDirection: 'row', width: '92vw', height: '14vh'}}>
          {isGotUserInfo ? (userInfo.name !== undefined &&
            <View
              style={{
                display: 'flex',
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
              }}>
              <Text className={'color-third-text'} style={{fontSize: '26rpx'}}>余额(元)</Text>
              <View style={{marginTop: '2px'}}>
                <Text style={{fontSize: '45rpx'}}>{userInfo.money}</Text>
              </View>
            </View>) : <View/>
          }
        </View>
        {/*我的卡劵*/}
      </View>

      {/* 修改个人信息 */}
      {isGotUserInfo ? (userInfo.profile ?
        <Image className={styles.user_avatar} src={userInfo.profile} mode="aspectFill"/> :
        <Text className={`${styles.user_avatar} ${styles.blank_avatar} iconfont icon-wode`}/>) : <View/>
      }

      <View onClick={toSelectAddress} className={`${styles.me_item_btn} item-click`}>
        <Text>地址管理</Text>
        <Text className="iconfont arrow_right"/>
      </View>

      <View onClick={toMyOrders} className={`${styles.me_item_btn} item-click`}>
        <Text>我的订单</Text>
        <Text className="iconfont arrow_right"/>
      </View>

      <View onClick={toRefundOrders} className={`${styles.me_item_btn} item-click`}>
        <Text>退款订单</Text>
        <Text className="iconfont arrow_right"/>
      </View>

      <View style={{marginTop: "100rpx"}} className="color-third-text text-tiny">下拉刷新</View>
    </View>
  )
}
export default Me;
